import React from "react";
import {
  Card,
  Table,
  Space,
  Button,
  Select,
  DatePicker,
  Input,
  Typography,
  Row,
  Col,
  Tag,
  Form,
  Layout,
} from "antd";
import {
  SearchOutlined,
  ReloadOutlined,
  ExportOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";

const { Title } = Typography;
const { RangePicker } = DatePicker;
const { Search } = Input;
const { Content } = Layout;

interface DefectData {
  key: string;
  defectId: string;
  title: string;
  project: string;
  severity: string;
  priority: string;
  handler: string;
  reporter: string;
  responsible: string;
  phase: string;
  source: string;
  action: string;
}

const SearchList: React.FC = () => {
  const [form] = Form.useForm();

  const columns = [
    {
      title: "缺陷编号",
      dataIndex: "defectId",
      key: "defectId",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "所属项目",
      dataIndex: "project",
      key: "project",
    },
    {
      title: "严重程度",
      dataIndex: "severity",
      key: "severity",
      render: (text: string) => {
        const colorMap: Record<string, string> = {
          "1-致命": "red",
          "2-严重": "orange",
          "3-一般": "blue",
          "4-轻微": "green",
          "5-建议及警告": "default",
        };
        return (
          <Tag color={colorMap[text] || "default"} data-oid="huryvd4">
            {text}
          </Tag>
        );
      },
    },
    {
      title: "优先级",
      dataIndex: "priority",
      key: "priority",
      render: (text: string) => {
        const colorMap: Record<string, string> = {
          "1-紧急": "red",
          "2-正常": "blue",
          "3-低": "green",
        };
        return (
          <Tag color={colorMap[text] || "default"} data-oid=".pv0blt">
            {text}
          </Tag>
        );
      },
    },
    {
      title: "当前处理人",
      dataIndex: "handler",
      key: "handler",
    },
    {
      title: "发现人",
      dataIndex: "reporter",
      key: "reporter",
    },
    {
      title: "责任人",
      dataIndex: "responsible",
      key: "responsible",
    },
    {
      title: "发现阶段",
      dataIndex: "phase",
      key: "phase",
    },
    {
      title: "缺陷来源",
      dataIndex: "source",
      key: "source",
    },
    {
      title: "缺陷处理",
      dataIndex: "action",
      key: "action",
      render: () => (
        <Button type="link" data-oid="aooxugu">
          建卡
        </Button>
      ),
    },
  ];

  const data: DefectData[] = [
    {
      key: "1",
      defectId: "1295881",
      title: "测试验证99",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "王杨智",
      reporter: "王杨智",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
      action: "建卡",
    },
    {
      key: "2",
      defectId: "1181992",
      title: "test33",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "王杨智",
      reporter: "王杨智",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
      action: "建卡",
    },
    {
      key: "3",
      defectId: "1182058",
      title: "test00",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "王杨智",
      reporter: "王杨智",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
      action: "建卡",
    },
    {
      key: "4",
      defectId: "1182071",
      title: "缺陷流程测试-2023-05-18",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "黄莉",
      reporter: "王宇壮",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
      action: "建卡",
    },
    {
      key: "5",
      defectId: "1165996",
      title: "test",
      project: "精益之星-电子看板20...",
      severity: "5-建议及警告",
      priority: "2-正常",
      handler: "黄莉",
      reporter: "黄莉",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
      action: "建卡",
    },
  ];

  const handleReset = () => {
    form.resetFields();
  };

  const handleExport = () => {
    // TODO: 实现导出功能
    console.log("导出数据");
  };

  return (
    <Layout className={styles.container} data-oid="xuu2g:p">
      <Content data-oid="6u-map3">
        <Card data-oid="yk51zi5">
          <div className={styles.header} data-oid="ke5z48v">
            <Title level={4} data-oid="tp:t0e0">
              缺陷管理
            </Title>
            <Space data-oid="my26f5-">
              <Button
                icon={<ExportOutlined data-oid="l2k4unx" />}
                onClick={handleExport}
                data-oid="0-0-cez"
              >
                导出
              </Button>
            </Space>
          </div>

          <Form
            form={form}
            layout="vertical"
            className={styles.searchForm}
            data-oid="gjwnl10"
          >
            <Row gutter={[16, 16]} data-oid="icziout">
              <Col span={6} data-oid="tjp9x9j">
                <Form.Item name="project" label="所属项目" data-oid="v0-ro91">
                  <Select placeholder="请选择" data-oid="4f.8p:u">
                    <Select.Option value="dev" data-oid="og40s0u">
                      精益之星-电子看板20...
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid="x69czop">
                <Form.Item name="handler" label="当前处理人" data-oid="tx924_-">
                  <Select placeholder="请选择" data-oid="q7ot1-9">
                    <Select.Option value="王杨智" data-oid="4cxn-mv">
                      王杨智
                    </Select.Option>
                    <Select.Option value="黄莉" data-oid="ie:sstd">
                      黄莉
                    </Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6} data-oid=":kgjzxb">
                <Form.Item name="timeRange" label="时间范围" data-oid="48w9r94">
                  <RangePicker style={{ width: "100%" }} data-oid="neq:7he" />
                </Form.Item>
              </Col>
              <Col span={6} data-oid="5tkyibr">
                <Form.Item name="keyword" label="关键字" data-oid="t-g1t21">
                  <Search
                    placeholder="请输入编号/名称/处理人"
                    data-oid="6zk9ra8"
                  />
                </Form.Item>
              </Col>
              <Col span={24} style={{ textAlign: "right" }} data-oid=".rv9bow">
                <Space data-oid="272king">
                  <Button
                    icon={<ReloadOutlined data-oid="6hx771p" />}
                    onClick={handleReset}
                    data-oid="aq2bki7"
                  >
                    重置
                  </Button>
                  <Button
                    type="primary"
                    icon={<SearchOutlined data-oid="ktcxh.w" />}
                    data-oid="dm.bvfa"
                  >
                    搜索
                  </Button>
                </Space>
              </Col>
            </Row>
          </Form>

          <Table
            columns={columns}
            dataSource={data}
            pagination={{
              total: 50,
              pageSize: 10,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条`,
            }}
            data-oid="a0nbgqm"
          />
        </Card>
      </Content>
    </Layout>
  );
};

export default SearchList;
